// ---------------------------------------------------------------
axios.get('/dashboard').then(({ data: res }) => {
  // 解构赋值
  const { overview, year, salaryData,groupData, provinceData } = res.data
  for (let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }
  lineChart(year)
  classSalaryChart(salaryData)
  sexSalaryChart(salaryData)
  groupSalaryChart(groupData)
  mapChart(provinceData)
})

// ------------------------ 1. 折线图 ------------------------------
const lineChart = (data) => {
  let myChart = echarts.init(document.querySelector('#line'))
  let option = {
    title: {
      text: '2022全学科薪资走势',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.month),
      axisLabel: {
        color: '#999' // 坐标轴文字颜色
      },
      axisLine: {
        lineStyle: {
          color: '#ccc', // 轴线颜色
          type: 'dashed' // 轴线类型：虚线
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed' // Y轴分割线，轴线类型：虚线
        }
      }
    },
    series: [
      {
        data: data.map(item => item.salary),
        type: 'line', // 图形的类型
        smooth: true, // 平滑曲线
        lineStyle: {
          width: 6,
        },
        // 1. 使用echarts给定的基本图形，比如空心圆、实心圆、矩形......
        // symbol: 'rect',
        // 2. 可以使用图片地址
        // symbol: 'image://http://www.itcbc.com:3006/formdata/123.png',
        // 3. 可以使用base64格式的图片（百度搜索图片转base64，复制转换后的字符串）
        // symbol: 'image://.....',
        // 4. 使用 svg 格式的图片（如果有多个path，使用分号隔开）
        // symbol: 'path://M710.684108 957.19......',
        symbolSize: 10, // 拐点处图形的大小
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 0.8, color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
              },
              {
                offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ],
    tooltip: {
      trigger: 'axis' // 表示鼠标移入到轴的范围内就可以提示
    },
    grid: {
      top: '20%'
    },
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
        offset: 1, color: '#5D75F0' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
  myChart.setOption(option) // setOption第1个O是大写的
}

// ------------------------ 2. 饼图-右上角 ---------------------------
// 班级薪资分布
const classSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector('#salary'))
  let option = {
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '6%', // 修改图例的位置
      left: 'center',
      itemWidth: 13 // 图例图形的宽度
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布', // 修改名字
        type: 'pie', // 饼图，不用改
        radius: ['50%', '64%'], // 内外圈的半径，需要改
        center: ['50%', '50%'],
        // avoidLabelOverlap: false,
        itemStyle: { // 每一项的样式
          borderRadius: 10, // 圆角设置
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false, // 不显示文字
          // position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: '40',
        //     fontWeight: 'bold'
        //   }
        // },
        // labelLine: {
        //   show: true
        // },
        data: data.map(item => {
          return {
            value: item.g_count + item.b_count,
            name: item.label
          }
        })
      }
    ]
  };
  myChart.setOption(option)
}

// ------------------------ 3. 饼图-左下角 ---------------------------
// 男生薪资分布 和 女生薪资分布
const sexSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector('#gender'))
  let option = {
    title: [
      {
        text: '男女生薪资分布',
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      {
        text: '男生',
        top: '45%',
        left: '45%',
        textStyle: {
          fontSize: 12
        }
      },
      {
        text: '女生',
        top: '85%',
        left: '45%',
        textStyle: {
          fontSize: 12
        }
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '男生薪资分布', // 修改名字
        type: 'pie', // 饼图，不用改
        radius: ['20%', '30%'], // 内外圈的半径，需要改
        center: ['50%', '30%'], // 圆心点坐标
        data: data.map(item => ({ name: item.label, value: item.b_count }))
      },
      {
        name: '女生薪资分布', // 修改名字
        type: 'pie', // 饼图，不用改
        radius: ['20%', '30%'], // 内外圈的半径，需要改
        center: ['50%', '70%'], // 圆心点坐标
        data: data.map(item => ({ name: item.label, value: item.g_count }))
      }
    ]
  };
  myChart.setOption(option)
}

// ------------------------ 4. 柱状图 -------------------------------
const groupSalaryChart = (data) => {
  let myChart = echarts.init(document.querySelector('#lines'))
  let option = {
    xAxis: {
      type: 'category',
      // data: ['张三', '李四', '王五', '4月', '5月', '6月', '7月'],
      data: data[1].map(item => item.name),
      axisLabel: {
        color: '#999' // 坐标轴文字颜色
      },
      axisLine: {
        lineStyle: {
          color: '#ccc', // 轴线颜色
          type: 'dashed' // 轴线类型：虚线
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed' // Y轴分割线，轴线类型：虚线
        }
      }
    },
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: data[1].map(item => item.hope_salary),
        type: 'bar',
        name: '期望薪资'
      },
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: data[1].map(item => item.salary),
        type: 'bar',
        name: '实际薪资'
      }
    ],
    // color: ['渐变色', '渐变色']
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#34D39A' // 0% 处的颜色
        }, {
          offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
        }, {
          offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }],
    grid: {
      top: 30,
      left: 70,
      bottom: 50,
      right: 30
    },
    tooltip: {}
  }
  myChart.setOption(option)

  document.querySelector('#btns').addEventListener('click', function (e) {
    if (e.target.tagName === 'BUTTON') {
      // 做排他效果
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      // 获取组号，并更换图表数据
      let index = e.target.innerHTML
      // console.log(index)
      option.xAxis.data = data[index].map(item => item.name)
      option.series[0].data = data[index].map(item => item.hope_salary)
      option.series[1].data = data[index].map(item => item.salary)
      // 重新创建图表
      myChart.setOption(option)
    }
  })
}

// ------------------------ 5. 地图 --------------------------------
const mapChart = (data) => {
  const mapData = [
    // 数据的 name 必须要和 地图的名字一致
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]

  mapData.forEach(inem => {
    // 判断，data中是否包含当前这个省，如果包含更换一下value
    let res = data.find(v => (v.name.includes(inem.label)))
    if (res) {
      itme.value = res.value
    }
  })


  let myChart = echarts.init(document.querySelector('#map'))
  let option = {
    title: {
      text: '籍贯分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    // 做一个图的时候，有标题title、图例legend、提示框tooltip、x轴、y轴、网格grid、系列数据series、颜色，必不可少的是？
    series: [
      {
        name: '籍贯分布',
        data: mapData,
        type: 'map', // line折线图； pie饼图；bar柱状图; map地图
        // map: '河北', // 表示做河北地图（做什么地图，必须引入对应的地图文件才行）
        // 地图文件去下载的压缩包 （test > data > map > js）
        map: 'china', // 表示做中国地图（做什么地图，必须引入对应的地图文件才行）
        label: {
          show: true, // 显示每个省的名字
          fontSize: 10,
          color: 'rgba(0,0,0,0.7)'
        },
        itemStyle: { // 每个省的默认样式
          areaColor: '#E0FFFF',
          borderColor: 'rgba(0, 0, 0, 0.2)', // 边框线，省界线
        },
        emphasis: { // 鼠标移入每个省，变化成什么样式
          itemStyle: {
            areaColor: '#34D39A',
            borderWidth: 0,
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    // 视觉映射组件
    visualMap: {
      type: 'continuous', // 连续型
      min: 0,
      max: 20,
      inRange: {
        color: ['#fff', '#0075F0']
      },
      text: [20, 0],
      left: 40,
      bottom: 20
    },
    // 提示框组件
    tooltip: {
      // 自定义提示的格式: {a}表示series中的name   {b}表示各省的名字   {c}表示各省的数据
      formatter: '{b}：{c}位学员', // 河北：15位学员
      textStyle: {
        color: '#fff'
      },
      borderColor: 'transparent', // 边框透明
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
  myChart.setOption(option)
}

